<template>
  <div class="musicbox">
    <div
      v-if="info.music_url != '' || info.music_url.length != 0"
      class="music"
      :class="playStatus ? 'play' : ''"
      @click="play()"
    >
      <audio autoplay="autopaly" loop="loop" id="audios">
        <source :src="domain + info.music_url" type="audio/mp3" />
      </audio>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      info: JSON.parse(sessionStorage.getItem("taskInfo")).setting,
      playStatus: false,
      isWeixin: false,
    //   show: false,
      pc: sessionStorage.getItem("OSType"),
    };
  },
  created(){
      //typeof obj === Object
    //   if(typeof this.info.music === Object){
    //     this.show=true
    //   }
      this.isWeixin=sessionStorage.getItem('isWeixin')=='true'?true:false
    },
    mounted(){
      // if(this.isWeixin && this.info.music_url){
      if(this.info.music_url){  
        this.audioAutoPlay('audios')
      }
    },
    methods:{
      //播放与暂停
      play(){
        // if(this.isWeixin){
          this.playStatus?document.getElementById('audios').pause():document.getElementById('audios').play()
          this.playStatus=!this.playStatus
        // }
      },
      //自动播放
      audioAutoPlay(id){
        if(this.info.music_url==''){
          return
        }
        var audio = document.getElementById(id),
        play = function(){  
          audio.play();  
          document.removeEventListener("touchstart",play, false);  
        };  
        document.addEventListener("WeixinJSBridgeReady", function () {  
          play();  
        }, false);  
        document.addEventListener('YixinJSBridgeReady', function() {  
          play();  
        }, false);  
        document.addEventListener("touchstart",play, false);  
        this.playStatus=true
      }
    }
};
</script>

<style lang="scss" scoped>
.musicbox {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  max-width: 10rem;
  margin: auto;
  z-index: 222;

  .music{
    width: .8rem;
    height: .8rem;
    display: inline-block;
    background: url('~@/assets/music.png');
    background-size: 100% 100%;
    position: absolute;
    top: 0.32rem;
    left: 0.32rem;
    z-index: 9999;
  }
  .play{
    background: url('~@/assets/music.png');
    background-size: 100% 100%;
    animation: music 4s infinite linear;
  }
}

//播放动画
@keyframes music {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>